import React from 'react';
import '@/store/index'
import { useDispatch, useSelector } from 'react-redux';
import { setName } from '@/store/stuSlice';

const RTK = () => {
  /**
   * useSelector 加载state中的数据
   * @param {function} callback
  */
  const {student} = useSelector(state => state)
  // console.log('student',student)
  
  // 通过useDispatch() 获取派发器对象
  const dispatch = useDispatch()
  // 获取action构建器

  const editName = () => {
    dispatch(setName('王五'))
  }
  /**
   * 流程
   * 1.store在ReactDom生效，引入 Provider <Provider store={store}><RTK/></Provider>
   * 2.useSelector() 取数据
   * 3.useDispatch() 获取派发器对象
   * 4.获取action构建器
  */
  return (
    <div>
      <h2>RTK</h2>
      <span>{student.name}--</span>
      <span>{student.age}--</span>
      <span>{student.sex}--</span>
      <span>{student.address}</span>
      <button onClick={editName}>修改name</button>
    </div>
  );
};

export default RTK;